<template>
  <div class="account">
    <cu-header v-if="reloadHeader" :height="80"/>
    <div>
     <!--余额-->
      <div class="recharge-out">
        <div class="recharge">
          <div style="font-size: 28px;font-weight: 900;color: #fb8c24">Os meus anúncios</div>
          <div style="display: flex;align-items: center">
            <div style="color: #333">Saldo: <span style="color:#fb8c24">{{user.balance | num2Money}}</span> KZ</div>
            <div style="margin-left: 20px;"><el-button type="primary" @click="toCharge">Carregue conta</el-button></div>
          </div>
        </div>

      </div>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane :label="$t('account.1')" name="tab1">
          <div class="container tab-panel1" v-if="activeName === 'tab1'">
            <send-list />
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('account.2')" name="tab2">
          <div class="container tab-panel1" v-if="activeName === 'tab2'">
            <favorite-list />
          </div>
        </el-tab-pane>
        <!--        <el-tab-pane :label="$t('account.3')" name="tab3">-->
        <!--          <div class="container tab-panel3" v-if="activeName === 'tab3'">-->
        <!--            <profit-table />-->
        <!--          </div>-->
        <!--        </el-tab-pane>-->
        <el-tab-pane :label="$t('account.4')" name="tab3">
          <div class="container tab-panel4" v-if="activeName === 'tab3'">
            <user-info @changeUser='changeUser'/>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('account.5')" name="tab4">
          <div class="container tab-panel1" v-if="activeName === 'tab4'">
            <consume-list />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <cu-footer />
  </div>
</template>
<script>
import CuHeader from '@/components/header';
import FavoriteList from '@/components/favorite-list';
import SendList from '@/components/send-list';
import ConsumeList from '@/components/consume-list';
import ProfitTable from '@/components/profit-table';
import UserInfo from '@/components/user-info';
import CuFooter from '@/components/footer/index3';
import Api from "@/api";
import merge from 'webpack-merge';
export default {
  name: 'Account',
  // components: { CuHeader, FavoriteList, SendList, UserInfo, ProfitTable },
  components: { CuHeader, FavoriteList, SendList, UserInfo, CuFooter,ConsumeList },
  data() {
    return {
      activeName: 'tab1',
      user:{},
      reloadHeader:true
    };
  },
  created() {
    this.loadUserInfo()
    if(this.$route.query.tab){
      this.activeName = this.$route.query.tab
    }
  },
  watch:{
    $route(to,from){
      if(to.query.tab){
        this.activeName = this.$route.query.tab
      }
    }
  },
  methods: {
    loadUserInfo() {
      Api.loadUser().then((res) => {
        this.user = res;
      });
    },
    handleTabClick(tab) {
      this.activeName = tab.name;
      this.$router.push({
        query:merge(this.$route.query,{'tab':tab.name})
      })
    },
    // 修改个人信息成功后刷新header
    changeUser(){
      this.reloadHeader = false
     this.$nextTick(() => (this.reloadHeader = true))
    },
    toCharge(){
      this.$router.push({path:"/foot/recharge"})
    }
  },
};
</script>
<style lang="scss" scoped>
.account {
  background: #f2f2f2;
  ::v-deep .el-tabs__header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    background: #fff;
    .el-tabs__active-bar {
      height: 4px;
      border-radius: 8px 8px 0 0;
    }
    .el-tabs__nav-wrap::after {
      background-color: transparent;
    }
    .el-tabs__item {
      height: 64px;
      line-height: 64px;
    }
  }

  .tab-panel1,
  .tab-panel3,
  .tab-panel4 {
    padding: 50px;
    box-sizing: border-box;
  }

  .tab-panel2 {
    padding: 50px 0;
    box-sizing: border-box;
  }
}
.recharge-out{
  background-color: #fff;
  .recharge{
    max-width: 1320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 50px;
    margin: auto;
  }
}
</style>
